<template>
    <div class="common-layout">
        <el-container>
            <el-header class="user-header">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item>
                        <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="searchForm.address" placeholder="请输入地址" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="searchForm.sex" placeholder="选择性别">
                            <el-option label="全部" value="" />
                            <el-option value="0" label="男"></el-option>
                            <el-option value="1" label="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addUserHandle('add')">+ 添加用户</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="userData" stripe style="width: 100%">
                    <el-table-column prop="username" label="用户名" />
                    <el-table-column prop="password" label="密码" />
                    <el-table-column prop="identity" label="身份证号" width="180px" />
                    <el-table-column prop="realName" label="姓名" />
                    <el-table-column label="性别">
                        <template #default="scope">
                            <el-text>{{ scope.row.sex == '0' ? '男' : '女' }}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="地址" width="300px" />
                    <el-table-column label="活跃状态">
                        <template #default="scope">
                            <el-text style="color: #2fdd2f;">{{ scope.row.available == '0' ? '禁用' : '活跃' }}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button link style="width: 40px;margin-left: 0px;" type="primary" size="large"
                                @click="handleEditUser(scope.row.id)">编辑</el-button>
                            <el-button link style="width: 40px;margin-left: 0px;" type="primary" size="large"
                                @click="handleAvailableUser(scope.row.id, scope.row.available)">
                                {{ scope.row.available == '0' ? '活跃' : '禁用' }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination-centered" v-model:current-page="searchForm.currentPage"
                    v-model:page-size="searchForm.pageSize" :page-sizes="[5, 10, 15, 20]" :small="false"
                    :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                    :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { getUserPage, updateUser } from '@/api'
import { ElMessage } from 'element-plus'
// 定义对象结构接口，只定义类型不赋初始值
interface User {
    id: any;
    username: any;
    password: any;
    identity: any;
    realName: any;
    sex: any;
    address: any;
    type: any;
    available: any;
}

// 列表数据
let userData = ref<User[]>([]);

//总页数
let counts = ref(0)

// 定义搜索表单数据模型
let searchForm = reactive({
    username: '',
    sex: '',
    address: '',
    currentPage: 1,
    pageSize: 5,
});

// 查询处理函数
const handleSearch = () => {
    getUserPage(searchForm).then(async (res: { data: any }) => {
        let resData = res.data.data
        if (res.data.code == 50041) {
            // 更新列表
            userData = resData.records;
            // 更新总页数
            counts.value = resData.total
            // 使用nextTick确保DOM已更新
            await nextTick()
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
};


// 初始化方法
const init = () => {
    // 发送分页查询请求
    getUserPage(searchForm).then((res: { data: any }) => {
        let resData = res.data.data
        if (res.data.code == 50041) {
            // 更新列表
            userData.value = resData.records
            console.log(userData);
            // 更新总页数
            counts.value = resData.total
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
}

// 编辑汽车信息
const handleEditUser = (id: any) => {
    // 发送消息给父窗口，告知要改变页面
    window.parent.postMessage({ action: 'changePage', url: '/#/user/add?id=' + id }, '*');
}

// 新增汽车信息
const addUserHandle = (id: any) => {
    // 发送消息给父窗口，告知要改变页面
    window.parent.postMessage({ action: 'changePage', url: '/#/user/add' }, '*');
}

// 汽车出库
const handleAvailableUser = (id: any, available: any) => {
    let params = reactive({
        id: '',
        available: '',
    });
    params.id = id
    params.available = available == '1' ? '0' : '1'
    updateUser(params).then((res: { data: any }) => {
        if (res.data.code == 50031) {
            ElMessage({
                message: res.data.message,
                type: 'success'
            });
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
}

// 在组件挂载时初始化数据
onMounted(() => {
    init();
});

// 监听页大小改变
const handleSizeChange = (val: number) => {
    searchForm.pageSize = val;
    init();
};

// 监听当前页改变
const handleCurrentChange = (val: number) => {
    searchForm.currentPage = val;
    init();
};

</script>

<style scoped>
.pagination-centered {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* 根据需要调整间距 */
}

.el-form-item {
    min-width: 150px;
}

.el-form {
    margin-top: 20px;
}

.user-header {
    overflow: hidden;

}
</style>